import React, { useState ,useEffect} from 'react';
import '../../../styles/liuhuan/hospitalizationExpenseRecor.scss'
// 输入组件
import { Input } from 'antd';
// 按钮组件 和 按钮组件ts类型声明
import { Button, } from 'antd';
// 表格组件和 ts类型声明
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
// 图标
import { CopyFilled, DeleteFilled } from '@ant-design/icons';
// 分页
import { Pagination, ConfigProvider} from 'antd';
// 导入中文
import zh_CN from 'antd/es/locale/zh_CN';
// 接口
import {aRefundRecord_list,aRefundRecord_delete,aRefundRecord_getname,aRefundRecord_getId,aRefundRecord_page } from '../../../utils/expense management/api'
import { useNavigate } from 'react-router-dom';
// 导入封装组件
import Title from '../../../component/liuhuan/Title' 
import LhSearch from '../../../component/liuhuan/LhSearch'
import Tables from '../../../component/liuhuan/Tabal'
interface Props {

}
// 表格类型声明
interface DataType {
    id:number;
    key: string;
    operatingTime: string;
    orderNumber:string;
    patientName: string;
    medicalCardNumber: number;
    inTheHospital: number;
    source: string,
    businessTypes: string;
    methodOfPayment: string;
    payTheAmount: string;
    paymentStatus: string;
    remainingSumInsideCard: number;
}

// 退款记录组件
function Inpatientconsumption(props: Props) {

    // 表列标题
    const columns: ColumnsType<DataType> = [
        {
            title: '操作时间', // 表格每列标题
            dataIndex: 'operatingTime', // 与每行内容对应
            key:'operatingTime'
        },
        {
            title: '退款编号',
            dataIndex: 'orderNumber',
            key:'orderNumber'
        },
        {
            title: '患者姓名',
            dataIndex: 'patientName',
            key:'patientName'
        },
        {
            title: '就诊卡号',
            dataIndex: 'medicalCardNumber',
            key:"medicalCardNumber"
        },
        {
            title: '来源',
            dataIndex: 'source',
            key:'source'
        },
        {
            title: '业务类型',
            dataIndex: 'businessTypes',
            key:'businessTypes'
        },
        {
            title: '退款方式',
            dataIndex: 'methodOfPayment',
            key:'methodOfPayment'
        },
        {
            title: '退款金额（元）',
            dataIndex: 'payTheAmount',
            key:'payTheAmount',
            align: 'center',
        },
        {
            title: '退款状态',
            dataIndex: 'paymentStatus',
            key:'paymentStatus',
            className: 'paymentStatus'
        },
        {
            title: '卡内余额（元）',
            dataIndex: 'remainingSumInsideCard',
            key:'remainingSumInsideCard',
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            className: "operation",
            render: (_, record) => (
                <>
                    {/* 查看当前行详情 */}
                    <span><CopyFilled onClick={()=>{getId(record)}}/></span>
                    {/* 删除当前行 */}
                    <span><DeleteFilled onClick={()=>{delet(record)}}/></span>
                </>
            ),
        },
    ];

    // 表行状态
    const [data,setData] = useState([]);

    // 获取行内容方法
    let getDtat = ()=>{
        // 发送请求
       aRefundRecord_list().then((res)=>{
            console.log('获取列表',res.data);
            // 更新到行状态
            setData(res.data)
            // 更新分页状态
            setPagination({current:1,pageSize:10,total:res.data.length,showTitle:true,})
      })
    }

    // 生命周期挂载期
    useEffect(()=>{
        // 调用获取列表方法
        getDtat()
    },[])

    // 删除的回调
    let delet = (record:any)=>{
        console.log('当前行',record);
        // 发送请求
       aRefundRecord_delete(record.id).then((res)=>{
            console.log('删除',res);
            // 调用分页方法
            getPage(pagination.current,pagination.pageSize)
        })
    }   

    // 详情的回调
    let navigate = useNavigate()
    let getId =(record:any)=>{
        console.log('当前行',record);
        // 发送请求
       aRefundRecord_getId(record.id).then((res) => {
            console.log('详情',res);
            // 跳转路由传参
            navigate(`/index/expensemanagement/detailsPage`,{state:res.data})
        })
    }

    // 搜索方法
    let onSerach = (patient:any)=>{
        console.log('输入框内容',patient);
        // 发送请求
       aRefundRecord_getname(patient).then((res)=>{
            console.log('搜索',res);
            // 更新行状态
            setData(res.data)
            // 更新分页状态
            setPagination({current:1,pageSize:10,total:res.data.length,showTitle:true,})
        })
    }

    // 复选框选中数组状态
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // 复选框勾选回调
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('最新选中数组', newSelectedRowKeys);
        // 更新最新的选中数组到选中状态
        setSelectedRowKeys(newSelectedRowKeys);
    };
    // // 复选框控制实例
    const rowSelection = {
        // 选中的数组转台
        selectedRowKeys,
        // 勾选触发的回调
        onChange: onSelectChange,
    };

    // 分页状态
    let [pagination,setPagination] = useState({current:1,pageSize:10,total:100,showTitle:true,})
    // 分页回调
    let onhandelChange = function(pagination:any){
        console.log('最新分页数据',pagination);
        // 更新分页状态
        setPagination(pagination)
        // 解构分页回调传入的参数
        let {current,pageSize} = pagination
        // 调用分页方法
        getPage(current,pageSize)
    }
    // 分页请求方法
    let getPage = (current:number,pageSize:number)=>{
        // 发送请求
       aRefundRecord_page(current,pageSize).then((res)=>{
            console.log('分页',res);
            // 更新行状态
            setData(res.data)
        })
    }

    // 批量删除
    let batchDelete = ()=>{
        console.log('批量删除',selectedRowKeys);
        // 遍历复选框选中数组状态
        selectedRowKeys.map((item)=>{
            // 发送请求单个删除
           aRefundRecord_delete(item).then((res)=>{
                console.log('删除',res);
                // 调用分页方法
                getPage(pagination.current,pagination.pageSize)
            })
        })
    }

    // 传入的按钮的文本
    let btns ={btn1:'导入',btn2:'导出'}

    return (
        <div className='hospitalizationExpenseRecor'>

            {/* 标题公共组件 */}
            <Title title={'退款记录'} />

            {/* 内容 */}
            <div className='content'>

                {/* 搜索公共组件 */}
                <LhSearch onSerach={onSerach}>
                    {/* 传入按钮标签*/}
                    <Button type="primary" size='small' style={{marginLeft:15}} onClick={batchDelete}>批量删除</Button>
                </LhSearch>

                {/* 表格组件 */}
                <Tables 
                    // 传入表头
                    columns={columns} 
                    // 传入行数据
                    data={data} 
                    // 传入复选框及状态
                    rowSelection={rowSelection} 
                    // 传入分页状态
                    pagination={pagination} 
                    // 传入分页回调
                    onChange={onhandelChange}
                />
            </div>
        </div>
    );
}

export default Inpatientconsumption;